<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<html>

<head>
    <title>会员列表</title>
    <div data-th-replace="layout/head"></div>
</head>
<body>

    <!-- top bar -->
    <header class="bar bar-nav">
        <a class="button button-link button-nav pull-left goBack" href="javascript:window.history.go(-1);">
            <span class="iconfont icon-fanhui"></span>
        </a>
        <h1 class='title title-white'>开通会员</h1>
    </header>
    <!-- top bar end-->

    <div class="u-member-new_wrap" th:if="${#lists.isEmpty(userMemberList)}">
        <div class="clearfix u-member-new_box">
            <ul class="list-container ">
                <li   class="item-content">
                    <section class="no-data__wrap no-account-data__wrap">
                        <em>&nbsp;</em>
                        <p>亲，还没有任何会员类型哦~~~</p>
                    </section>
                </li>
            </ul>
        </div>
    </div>

    <div class="content" th:if="!${#lists.isEmpty(userMemberList)}">
        <section class="wm-line"></section>
        <div class="card">
            <section class="card-header">
                <span><em class="c-bbb iconfont icon-huiyuan"></em> 会员类型</span>
            </section>
            <section class="card-content pl5 ml5 mr5 pr5 pt5 pb5">
                <div class="recharge-number__wrap membership__wrap"><!--<c:if test="${index.index==0}">current</c:if>-->
                    <aside th:if="!${#lists.isEmpty(userMemberList)}"
                           th:each="member,index:${userMemberList}"
                           th:attr="data-id=${member['id']}" class="recharge-number-item" th:classappend="${index.index}==0? 'current':''" >
                        <span class="ml5">
                            <big style="font-size: 1rem;" th:text="${member['memberName']}"></big><br>
                            <small class="fs7 c-bbb" th:text="${member['depict']}"></small>
                        </span>
                        <span class="c-orange mr5">
                            <small class="fs7">￥</small>
                            <big style="font-size: 1rem;" th:text="${member['price']}"></big>
                        </span>
                    </aside>
                </div>
            </section>
            <section class="wm-line"></section>
        </div>
        <div class="pt5">&nbsp;</div>
    </div>
    <nav class="bar bar-tab course-info-bar-tab" th:if="!${#lists.isEmpty(userMemberList)}">
        <div class="ml5 mr5">
            <a href="javascript:void(0);" style="margin-top: -.3rem;" class="button button-big button-round button-fill" id="open-member-but"> 立即开通 </a>
        </div>
    </nav>

    <div data-th-replace="layout/footer"></div>
    <script type="text/javascript" th:src="@{{path}/front/mobile/business/user/center/member/member-list.js?v={v}(path=${staticPath},v=${v})}"></script>
</body>
</html>
